<!-- 切换主题 -->

<template>
  <el-dropdown trigger="click" @command="handleThemeChange" style="cursor: pointer;">
    <div>
      <svg-icon icon-class="theme" size="24px" />
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="settingsStore.theme === 'dark'" command="dark">
          黑夜
        </el-dropdown-item>
        <el-dropdown-item :disabled="settingsStore.theme === 'light'" command="light">
          白天
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";
import { useSettingsStore } from "@/store/modules/settings"; //默认配置

const settingsStore = useSettingsStore();
function handleThemeChange(lang: string) {
  console.log(lang);
  settingsStore.changeSetting({
    key: "theme",
    value: settingsStore.theme === "light" ? "dark" : "light",
  });
}
</script>